<template>
  <div id="box">
      <div class="goBack">
        <button @click="back">返回</button>
      </div>
      <iframe :src="pdfUrl" class="iframePdf"></iframe>
      <!-- <pdf 
        ref="pdf"
        v-for="item in numPages"
        :key="item"
        :page="item"
        :src="pdfSrc"
      ></pdf> -->
  </div>
</template>

<script>
import pdf from 'vue-pdf'
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
export default {
    name:"pdfPreview",
    data() {
        return {
            numPages: "",  // pdf 文件总页数
            pdfSrc: "",
            pdfUrl: '',
            isButtonVisible: false  // 显示/隐藏快捷键
        }
    },
    components: {
        pdf
    },
    created(){
      this.pdfUrl = this.$route.query.url
    },
    mounted(){
        this.getPreview()
        const divBox = document.querySelector('#box');
        divBox.addEventListener('scroll', this.handleScroll);
    },

    beforeDestroy() {
      const divBox = document.querySelector('#box');
      divBox.removeEventListener('scroll', this.handleScroll);
    },
    methods: {
        getPreview() {
          this.open = true;
          this.pdfSrc = pdf.createLoadingTask({url: this.pdfUrl},CMapReaderFactory);//解决中文乱码问题
          this.pdfSrc.promise.then(pdf => {
              this.numPages = pdf.numPages
          }).catch(err => {
              console.error('pdf 加载失败', err)
          })
        },
        scrollToTop() {
          const divBox = document.querySelector('#box');
          divBox.scrollTo({
            top: 0,
            behavior: 'smooth' // 平滑滚动
          });
        },
        handleScroll() {
          const divBox = document.querySelector('#box');
          this.isButtonVisible = divBox.scrollY > 50; // 调整滚动高度阈值
        },
        back() {
        this.$router.go(-1); // 返回上一层
      }
    }

}
</script>

<style>
.fixed-button-container {
  position: fixed;
  bottom: 20px; /* 根据需要调整按钮距离底部的距离 */
  right: 10%; /* 根据需要调整按钮距离右边的距离 */
  z-index: 22;
}
.round {
    width: 44px;
    height: 44px;
    border-radius: 22px;
    background-color: #f9f9f9;
}
.round img {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    display: block;
    height: 24px;
    width: 24px;
}

#box {
    padding: 20px;
    height: calc(100vh - 70px);
}

.goBack {
  position: absolute;
  top: 65px;
  right: 3%;
}

.iframePdf {
  width: 100%;
  height: 100%;
}
</style>